import React from 'react'
import { Space, Table, Tag } from 'antd';
import { useEffect, useState,useRef } from "react"
import { Button, Modal, Checkbox, Form, Input } from 'antd';
import axios from "axios"


function Dh1() {
  let [arr, setArr] = useState([])
  let [columns, setColumes] = useState([
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record, index) => (
        <Space size="middle">
          <a onClick={()=>eitfn(record,index)}>edit</a>
          <a onClick={() => delfn(index)}>Delete</a>
        </Space>
      ),
    },
  ])
  const myref = useRef(null)
  const [isModalVisible1, setIsModalVisible1] = useState(false); 
  const [isModalVisible, setIsModalVisible] = useState(false); // 弹窗默认是关闭的
  const [delindex, setDelIndex] = useState(0)
  const [editIndex,setEditINDEX] = useState(0)
  const [iseit,setIsedit] = useState("新增")
  const onFinish = (values) => {
    if ( iseit === "新增") {
      console.log('Success:', values);
      values.key = new Date().getTime()
      let newaRR = [...arr]
      newaRR.push(values)
      setArr(newaRR)
      setIsModalVisible1(false)
    } else {
        let newArr = [...arr]
        values.key = new Date().getTime()
        console.log(editIndex,2222);
        newArr[editIndex] = values
        setArr(newArr)
        setIsModalVisible1(false)

    }

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  let eitfn = (item,index)=>{
    setIsedit("编辑")
      console.log(item,index);
      setEditINDEX(index)
      setIsModalVisible1(true)
      setTimeout(()=>{  console.log(myref.current);
        myref.current.setFieldsValue(item)
      
      },100)
    
  }


  const handleOk = () => {
    let newArr = [...arr] // 在react中只要操作数组就要进行拷贝
    newArr.splice(delindex, 1)
    setIsModalVisible(false);
    setArr(newArr)
  };
  const handleOk1 = () => {
  
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleCancel1 = () => {
    setIsModalVisible1(false);
  };
  let delfn = (index) => {
    console.log(index);
    setIsModalVisible(true);
    setDelIndex(index)
  }
  useEffect(() => {
    axios.get("/list").then(res => {
      console.log(res.data);
      setArr(res.data)
    })
  }, [])
  let addfn = () => {
       setIsModalVisible1(true)
       setIsedit("新增")
       setTimeout(()=>{
          console.log(myref.current);
          myref.current.resetFields() // 清空表单
       },100)
  }
  return (
    <div>
      <Button onClick={addfn}> 新增</Button>
      <Table columns={columns} dataSource={arr} />
      {/* 删除的弹窗 */}
      <Modal title="删除弹窗" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>您确定要删除吗?</p>
      </Modal>
      <Modal title={iseit} visible={isModalVisible1} onOk={handleOk1} onCancel={handleCancel1} footer={null}>
        <Form
          name="basic"
          ref = {myref}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="name"
            name="name"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="address"
            name="address"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="date"
            name="date"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Dh1